<template>
    <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="属性" style="position: relative">
            <a-form
                v-if="current && current.attributes"
                layout="vertical"
                class="ml-option-form"
            >
                <a-form-item label="标题">
                    <a-input v-model:value="current.label"></a-input>
                </a-form-item>
                <a-form-item v-for="item in attrs" :key="item.attributeValue">
                    <template #label>
                        <a-row
                            justify="space-between"
                            style="width: 100%; border-bottom: 1px solid #ccc"
                        >
                            <a-col>
                                {{ item.attributeName }}
                            </a-col>
                        </a-row>
                    </template>
                    <columns-option
                        v-if="item.dataType === 'Columns'"
                        v-model:value="current.attributes[item.attributeValue]"
                    />
                    <option-data-source
                        v-else-if="item.dataType === 'DataSource'"
                        v-model:value="current.attributes[item.attributeValue]"
                    />
                    <option-select
                        v-else-if="item.dataType === 'SelectOption'"
                        v-model:value="current.attributes[item.attributeValue]"
                    />
                    <option-acitons
                        v-else-if="item.dataType === 'Actions'"
                        v-model:value="current.attributes[item.attributeValue]"
                    />
                    <a-select
                        v-else-if="item.dataType == 'select'"
                        v-model:value="current.attributes[item.attributeValue]"
                        :options="item.defaultValue"
                    ></a-select>
                    <a-switch
                        v-else-if="item.dataType == 'boolean'"
                        v-model:checked="
                            current.attributes[item.attributeValue]
                        "
                    ></a-switch>
                    <a-input
                        v-else
                        v-model:value="current.attributes[item.attributeValue]"
                    ></a-input>
                </a-form-item>
                <a-form-item>
                    <template #label>
                        <a-row
                            justify="space-between"
                            style="width: 100%; border-bottom: 1px solid #ccc"
                        >
                            <a-col> 动作面板 </a-col>
                        </a-row>
                    </template>
                    <a-dropdown>
                        <a-button block @click="visibleEditFunc = true">
                            添加 <plus-circle-outlined />
                        </a-button>
                        <template #overlay>
                            <a-menu @click="handleClick">
                                <a-menu-item key="onClick">
                                    <a>onClick</a>
                                </a-menu-item>
                                <a-menu-item key="onMounted">
                                    <a>onMounted</a>
                                </a-menu-item>
                                <a-menu-item key="onUnMounted">
                                    <a>onUnMounted</a>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>

                    <a-row :gutter="[4, 4]">
                        <a-col
                            :span="24"
                            v-for="(func, key) in current.event"
                            :key="func"
                        >
                            <a-row>
                                <a-col flex="1">
                                    {{ key }}
                                </a-col>
                                <a-col>
                                    <a-space>
                                        <a> 修改 </a>
                                        <a
                                            class="ml-a-danger"
                                            @click="delete current.event[key]"
                                        >
                                            删除
                                        </a>
                                    </a-space>
                                </a-col>
                            </a-row>
                        </a-col>
                    </a-row>
                </a-form-item>
            </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" tab="样式"> 样式 </a-tab-pane>
        <a-tab-pane key="3" tab="高级"> </a-tab-pane>
    </a-tabs>

    <func-editor
        v-model:visible="event_form.visibleEditFunc"
        v-model:current="event_form.func_data"
        @ok="handleOk"
    />
</template>

<script lang="ts">
import { defineComponent, inject, reactive, ref, watch, Ref } from "vue";
import { PlusCircleOutlined } from "@ant-design/icons-vue";
import ColumnsOption from "./components/option-columns.vue";
import OptionDataSource from "./components/option-data-source.vue";
import OptionAcitons from "./components/option-acitons.vue";
import OptionSelect from "./components/option-select.vue";
import FuncEditor from "../func-editor/index.vue";
import { ComponentType } from "@/type/components";

export default defineComponent({
    components: {
        ColumnsOption,
        OptionDataSource,
        OptionSelect,
        PlusCircleOutlined,
        FuncEditor,
        OptionAcitons,
    },
    setup() {
        const all_attrs = inject<Ref<ComponentType[]>>("componnetsData");

        const current = inject<any>("current");
        //  监听组件
        watch(
            () => current.value,
            (val) => {
                if (all_attrs) {
                    attrs.value = all_attrs.value
                        .find((item) => item.tag == val.tag)
                        ?.attributes.map((a) => {
                            if (a.defaultValue) {
                                a.defaultValue = JSON.parse(a.defaultValue);
                            }
                            return a;
                        });
                }
            }
        );

        const event_form = reactive<{
            func_data: any;
            visibleEditFunc: boolean;
            event: string | null;
        }>({
            func_data: {},
            visibleEditFunc: false,
            event: null,
        });

        const attrs = ref();

        const handleOk = () => {
            if (!current.value.event) {
                current.value.event = {};
            }

            // 不重复
            if (event_form.event && !current.value.event[event_form.event]) {
                current.value.event[event_form.event] =
                    event_form.func_data.name || "";
                event_form.visibleEditFunc = false;
            }

            event_form.event = "";

            return;
        };

        const handleClick = ({ key }: { key: string }) => {
            event_form.event = key;
            event_form.visibleEditFunc = true;
        };

        return {
            attrs,
            current,
            activeKey: ref("1"),

            event_form,
            handleOk,
            handleClick,
        };
    },
});
</script>
